<template>
  <div class="set over-bg">
    <div class="title text-left text-18 person-bg flex js-sp align-base">
      <div>{{ $t("user.accountSettings") }}</div>
      <div class="flex align-center" v-if="!virtual_wallet">
        <div
          class="flex js-st text-16 align-base text-normal"
          v-if="fiat_currency_transaction_status"
        >
          <div class="text-t2 text-14">{{ $t("fiat.fundCode") }}</div>
          <div class="text-regular text-10 ml-4">
            {{ $t("user.IdentityVerificationTip") }}
          </div>
          <div
            class="change assets-btn text-12 radius text-center"
            @click="handlePassword"
          >
            {{
              user_fund_password_status
                ? $t("updatePass.update")
                : $t("global.setting")
            }}
          </div>
        </div>
        <div class="flex js-st text-16 align-center text-normal ml-30">
          <span class="text-t2 text-14">{{ $t("login.password") }}</span>
          <div
            class="change assets-btn text-12 radius text-center"
            @click="state.dialogChange = true"
          >
            {{ $t("updatePass.update") }}
          </div>
        </div>
      </div>
    </div>
    <div class="header-info person-bg flex mb-18">
      <div class="header flex-column js-ct align-center">
        <img src="@/assets/autor.png" alt />
        <div class="flex text-bolder  mb-6 mt-16 js-ct align-center">
          <div class="text-18 text-t1">
            {{ state.userInfo?.user_account }}
          </div>
        </div>
        <div class="flex align-center js-ct mb-12">
          <div class=" text-12 color_1e text-bold">
            <span v-if="state.UIDShow">UID：{{state.userInfo?.invite_code}}</span>
            <span v-if="!state.UIDShow">{{ $t("user.invitecode") }}：</span>
            <span>{{state.userInfo?.invite_code}}</span>
          </div>
          <div class=" text-14 ml-12" v-if="credit_score_status">
            <span class="text-bold"
              >{{ $t("reputation.reputationScore") }}：</span
            >
            <span :class="state.userInfo.points >= 60 ? 'text-t1' : 'text-red'">{{
              state.userInfo.points
            }}</span>
          </div>
        </div>
        <div class="text-14 text-t2 text-center">
          {{ $t("user.changePasswordTip") }}
        </div>
      </div>
    </div>
    <div class="safety person-bg mb-1">
      <div class="p-30 text-left bdb-borderBase flex js-sp align-center">
        <div class="text-t2 text-14 mb-10">
          {{ $t("user.securitySetting") }}
        </div>
        <div class="text-t1 text-bold text-14">
          {{ $t("user.24h") }} {{ $t("user.withdrawalLimit") }}：{{
            $currency(securityInfo?.withdrawal_limit)
          }}
          BTC
        </div>
      </div>
      <!-- 邮箱验证 -->
      <div
        class="veri person-bg mb-1 p-30 flex js-sp align-center bdb-borderBase"
      >
        <div class="veri-left flex js-st align-center">
          <i
            class="el-icon-success text-20 success"
            v-if="securityInfo?.user_email"
          ></i>
          <i class="el-icon-error text-20 error" v-else></i>
          <div class="text-left ml-14">
            <div class="color_42 text-14 mb-10">
              {{ $t("user.emailVerification") }}
            </div>
            <div class="color_42 text-14">
              {{ $t("user.withdrawalLimit") }} +{{
                $currency(securityInfo?.email_verification)
              }}
              BTC
            </div>
          </div>
        </div>
        <div class="text-12 text-left text-t2 veri-center">
          {{ $t("user.emailVerificationTip") }}
        </div>
        <div class="text-12 text-left text-t2 w-128">
          {{ securityInfo?.user_email }}
        </div>
        <div
          v-if="!virtual_wallet"
          class="text-12 radius assets-btn"
          :class="securityInfo?.user_email ? 'primary share-color' : 'change'"
          @click="bind(4)"
        >
          {{
            securityInfo?.user_email ? $t("updatePass.update") : $t("user.Bind")
          }}
        </div>
      </div>
      <!-- 手机验证 -->
      <div
        class="veri person-bg mb-1 p-30 flex js-sp align-center bdb-borderBase"
      >
        <div class="veri-left flex js-st align-center">
          <i
            class="el-icon-success text-20 success"
            v-if="securityInfo?.user_phone"
          ></i>
          <i class="el-icon-error text-20 error" v-else></i>
          <div class="text-left ml-14">
            <div class="color_42 text-14 mb-10">
              {{ $t("user.phoneVerification") }}
            </div>
            <div class="color_42 text-14">
              {{ $t("user.withdrawalLimit") }} +{{
                $currency(securityInfo?.phone_verification)
              }}
              BTC
            </div>
          </div>
        </div>
        <div class="text-12 text-left text-t2 veri-center">
          {{ $t("user.emailVerificationTip") }}
        </div>
        <div class="text-12 text-left text-t2 w-128">
          {{ securityInfo?.user_phone }}
        </div>
        <div
          v-if="!virtual_wallet"
          class="text-12 radius assets-btn"
          :class="securityInfo?.user_phone ? 'primary share-color' : 'change'"
          @click="bind(5)"
        >
          {{
            securityInfo?.user_phone ? $t("updatePass.update") : $t("user.Bind")
          }}
        </div>
      </div>
      <!-- 身份验证 -->
      <div
        class="veri person-bg mb-1 p-30 flex js-sp align-center bdb-borderBase"
      >
        <div class="veri-left flex js-st align-center">
          <i
            class="el-icon-success text-20 success"
            v-if="securityInfo?.user_auth_level === 2"
          ></i>
          <i class="el-icon-error text-20 error" v-else></i>
          <div class="text-left ml-14">
            <div class="color_42 text-14 mb-10">
              {{ $t("user.IdentityVerification") }}
            </div>
            <div class="color_42 text-14">
              {{ $t("user.withdrawalLimit") }} +{{
                $currency(securityInfo?.authentication)
              }}
              BTC
            </div>
          </div>
        </div>
        <div class="text-12 text-left text-t2 veri-center">
          {{ $t("user.IdentityVerificationTip") }}
        </div>
        <div class="text-12 text-left text-t2 w-128"></div>
        <div
          v-if="!virtual_wallet"
          class="assets-btn text-12 radius"
          @click="goAuth()"
          :class="
            securityInfo?.user_auth_level === 2
              ? 'personlink'
              : securityInfo?.user_auth_level === 3
              ? 'errorbg share-color'
              : 'primary share-color'
          "
        >
          {{ authStatus(securityInfo?.user_auth_level) }}
        </div>
      </div>
      <!-- 高级认证 -->
      <div
        class="veri person-bg mb-1 p-30 flex js-sp align-center bdb-borderBase"
        v-if="securityInfo?.user_safety_certificate_status"
      >
        <div class="veri-left flex js-st align-center">
          <i
            class="el-icon-success text-20 success"
            v-if="securityInfo?.user_safety_certificate_type === 2"
          ></i>
          <i class="el-icon-error text-20 error" v-else></i>
          <div class="text-left ml-14">
            <div class="color_42 text-14 mb-10">
              {{ $t("Advanced.Advanced") }}
            </div>
            <div class="color_42 text-14">
              {{ $t("user.withdrawalLimit") }} +{{
                $currency(securityInfo?.safety_certificate)
              }}
              BTC
            </div>
          </div>
        </div>
        <div class="text-12 text-left text-t2 veri-center">
          {{ $t("Advanced.AdvancedTip") }}
        </div>
        <div class="text-12 text-left text-t2 w-128"></div>
        <div
          class="assets-btn text-12 radius"
          v-if="!virtual_wallet"
          @click="goAdvanced()"
          :class="
            securityInfo?.user_safety_certificate_type === 2
              ? 'personlink'
              : securityInfo?.user_safety_certificate_type === 3
              ? 'errorbg share-color'
              : 'primary share-color'
          "
        >
          {{ authStatus(securityInfo?.user_safety_certificate_type) }}
        </div>
      </div>
      <!-- 谷歌验证 -->
      <div class="veri person-bg mb-1 p-30 flex js-sp align-center">
        <div class="veri-left flex js-st align-center">
          <i
            class="el-icon-success text-20 success"
            v-if="
              securityInfo?.user_google_auth && securityInfo?.has_bind_google
            "
          ></i>
          <i class="el-icon-error text-20 error" v-else></i>
          <div class="text-left ml-14">
            <div class="color_42 text-14 mb-10">
              {{ $t("user.GoogleVerification") }}
            </div>
            <div class="color_42 text-14">
              {{ $t("user.withdrawalLimit") }} +{{
                $currency(securityInfo?.google_certification)
              }}
              BTC
            </div>
          </div>
        </div>
        <div class="text-12 text-left text-t2 veri-center">
          {{ $t("user.GoogleVerificationTip") }}
        </div>
        <div class="text-12 text-left text-t2 w-128"></div>
        <div
          class="assets-btn primary text-12 radius share-color"
          v-if="!virtual_wallet"
          @click="
            googleSaf(
              securityInfo?.has_bind_google && securityInfo?.has_bind_google==1
                ? 3
                : 2
            )
          "
        >
<!-- {{ securityInfo.has_bind_google }} -->
          {{
            securityInfo?.has_bind_google && securityInfo?.has_bind_google==1
              ? $t("user.verified")
              : $t("user.toCertification")
          }}
        </div>
      </div>
      <div
        @click="state.dialogInfo = true"
        class="text-t2 text-12 text-right use flex js-ed align-center point"
      >
        {{ $t("user.InstructionsForUse") }}
        <div class="wenhao flex js-ct align-center">?</div>
      </div>
    </div>
    <!-- 选择验证方式 -->
    <div class="test-box">
      <el-dialog
        :title="state.fondsTitle"
        :close-on-click-modal="false"
        top="25vh"
        v-model="state.dialogFonds"
        v-if="state.dialogFonds"
        width="368px"
      >
        <Fonds v-on:onChoice="choiceFonds" />
      </el-dialog>
    </div>
    <!-- 验证 -->
    <el-dialog
      :title="
        state.fonds === 1
          ? $t('user.phoneVerification')
          : state.fonds === 2
          ? $t('user.emailVerification')
          : state.fonds === 3
          ? state.googleFonds === 3
            ? $t('user.closeGugeTip')
            : $t('user.GoogleVerification')
          : state.fonds === 4
          ? $t('user.bindEmail')
          : state.fonds === 5
          ? $t('user.bindPhone')
          : ''
      "
      v-model="state.dialogVerify"
      :close-on-click-modal="false"
      width="453px"
    >
      <div class="plr-10" v-if="state.dialogVerify">
        <PhoneFond
          @safSuccess="safSuccess"
          :param="state.param"
          v-if="state.fonds === 1"
        />
        <EmailFond
          @safSuccess="safSuccess"
          :param="state.param"
          v-if="state.fonds === 2"
        />
        <GugeFond
          :fonds="state.googleFonds"
          @safSuccess="safSuccess"
          @bindSuccess="bindSuccess"
          v-if="state.fonds === 3 && state.dialogVerify"
        />
        <BindEmail
          :param="state.bindParam"
          @bindSuccess="bindSuccess"
          v-if="state.fonds === 4"
        />
        <BindPhone
          @bindSuccess="bindSuccess"
          :param="state.bindParam"
          v-if="state.fonds === 5"
        />
      </div>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog
      :title="$t('updatePass.updatePassword')"
      :close-on-click-modal="false"
      top="25vh"
      v-model="state.dialogChange"
      width="368px"
    >
      <ChangePass :param="state.param" />
    </el-dialog>
    <!-- 使用说明 -->
    <el-dialog
      :title="$t('user.GoogleVerification')"
      :close-on-click-modal="false"
      top="25vh"
      v-model="state.dialogInfo"
      width="552px"
    >
      <UseInfo v-on:close="closeInfo" />
    </el-dialog>
    <!-- 设置资金密码 -->
    <MerchantSetBox
      v-if="state.merchantSetVisibility"
      @oncancer="onCancel"
      :dialog="state.merchantSetVisibility"
      :type="3"
      @onconfirm="setAssetsPassword"
    ></MerchantSetBox>
    <!-- 修改资金密码 -->
    <ChangeAssetsPasswordBox
      v-if="state.editPasswordVisibility"
      :dialog="state.editPasswordVisibility"
      @oncancer="onCancel"
      @onconfirm="editAssetsPassword"
      @forget="chooseFounds"
      :type="state.type"
    />
  </div>
</template>

<script>
import Fonds from "@/components/personModel/verification/fonds.vue";
import PhoneFond from "@/components/personModel/verification/verifi-phone.vue";
import GugeFond from "@/components/personModel/verification/verifi-guge.vue";
import EmailFond from "@/components/personModel/verification/verifi-email.vue";
import ChangePass from "@/components/personModel/verification/change-pass.vue";
import BindEmail from "@/components/personModel/verification/bind-email.vue";
import BindPhone from "@/components/personModel/verification/bind-phone.vue";
import UseInfo from "@/components/personModel/verification/guge-info.vue";
import { computed, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import MerchantSetBox from "@/components/fiat/merchantSetBox.vue";
import ChangeAssetsPasswordBox from "@/components/changeAssetsPasswordBox/index.vue";
import {
  getCreditScore,
  updateUserFundPassword,
  bind_google_auth,
  resetFundPassword,
} from "@/api/user";
import UseSystemSetting from "@/commonapi/useSystemSetting";

export default {
  name: "AccountSet",
  components: {
    Fonds,
    PhoneFond,
    GugeFond,
    EmailFond,
    ChangePass,
    BindEmail,
    BindPhone,
    UseInfo,
    MerchantSetBox,
    ChangeAssetsPasswordBox,
  },
  setup() {
    const $store = useStore();
    const { t } = useI18n();
    const state = reactive({
      credit_score: 0,
      fondsTitle: "",
      userInfo: $store.state.user.userInfo,
      isScoreShow: process.env.VUE_APP_SCORE_SHOW,
      dialogFonds: false, //选择验证方式
      dialogVerify: false, //验证
      dialogChange: false, //修改密码
      dialogInfo: false, //查看谷歌说明
      UIDShow: false, //UID开关
      fonds: 1, //1手机验证 2邮箱验证 3谷歌验证
      operaFond: 0,
      param: {},
      bindParam: {}, //安全验证成功后传回来的参数
      googleFonds: 1, //1谷歌验证 2谷歌绑定,
      merchantSetVisibility: false,
      editPasswordVisibility: false,
      type: 1, //1、重置资金密码,0、修改资金密码
      isCapitalPwd: false, // 是否来自资金密码(用于验证后跳转到重置或者修改页面)
      safety_verification_key: "",
    });
    const securityInfo = computed(() => {
      console.log($store.state.user,'$store.state.user')
      return $store.state.user.userInfo;
    });
    // 获取开关状态
    const { virtual_wallet,credit_score_status } = UseSystemSetting();
    const user_fund_password_status = computed(() => {
      return 0;
      // return $store.state.user.securityInfo.user_fund_password_status;
    });
    const fiat_currency_transaction_status = computed(() => {
      let list = $store.state.user.systemInfo;
      let flag = false;
      if (list && list.length > 0) {
        list.forEach((ele) => {
          if (ele.key === "fiat_currency_transaction_status") {
            flag = ele.value;
          }
        });
      }
      return flag;
    });
    /**
     * methods
     */
    onMounted(() => {
      getSecurity();
      isUIDShow();
      if (securityInfo.value.user_email && securityInfo.value.user_phone) {
        state.fondsTitle = t("fiat.securityVerify");
      }
      getUserScore();
    });
    //获取信誉分
    const getUserScore = () => {
      getCreditScore().then((res) => {
        state.credit_score = res.data.value;
      });
    };
    const handlePassword = () => {
      if (!user_fund_password_status.value) {
        state.merchantSetVisibility = true;
      } else {
        state.isCapitalPwd = true;
        state.type = 0;
        state.safety_verification_key = "";
        state.editPasswordVisibility = true;
      }
    };
    //获取安全认证信息
    const getSecurity = () => {
      $store.dispatch("user/changeSecurity").then(() => {});
    };
    const $router = useRouter();
    //判断uid显示开关
    const isUIDShow = () => {
      let list = $store.state.user.systemInfo;
      list.forEach((ele) => {
        if (ele.key === "uid_status") {
          state.UIDShow = ele.value;
        }
      });
    };
    // 选择验证方式
    const bind = (val) => {
      if (val === 4) {
        // 邮箱验证
        if (securityInfo.value.user_email) {
          state.fondsTitle = t("user.changeEmailTip");
        } else {
          state.fondsTitle = t("user.bindEmailTip");
        }
      } else if (val === 5) {
        // 手机验证
        if (securityInfo.value.user_phone) {
          state.fondsTitle = t("user.changePhoneTip");
        } else {
          state.fondsTitle = t("user.bindPhoneTip");
        }
      }
      state.isCapitalPwd = false;
      state.operaFond = val;
      state.dialogFonds = true;
    };
    // 选择好验证方式
    const choiceFonds = (val) => {
      console.log(val, "val");
      state.fonds = val;
      switch (val) {
        case 1:
          state.param = { user_phone_number: securityInfo.value.user_phone };
          break;
        case 2:
          state.param = { email: securityInfo.value.user_email };
          break;
        case 3:
          state.googleFonds = 1;
          break;
        case 4:
          break;
        case 5:
          break;
        default:
          break;
      }
      state.dialogFonds = false;
      state.dialogVerify = true;
    };
    // 谷歌绑定
    const googleSaf = (type) => {
      console.log(type,'type---')
      state.fonds = 3;
      state.googleFonds = type;
      state.dialogVerify = true;
    
    };
    // 验证成功
    const safSuccess = (key) => {
      console.log(state.fonds, "state.fonds");
      state.fonds = state.operaFond;
      switch (state.fonds) {
        case 1:
          state.param = { user_phone_number: securityInfo.value.user_phone };
          break;
        case 2:
          state.param = { email: securityInfo.value.user_email };
          break;
        case 3:
          state.googleFonds = 1;
          break;
        case 4:
        case 5:
          state.bindParam = key;
          break;
        default:
          break;
      }
      if (state.isCapitalPwd) {
        state.type = 1;
        state.dialogVerify = false;
        state.editPasswordVisibility = true;
        state.safety_verification_key = key.safety_verification_key;
      }
    };
    // 绑定成功
    const bindSuccess = (val) => {
      state.dialogVerify = val;
      if (
        !val &&
        ((securityInfo.value.user_email && state.fonds === 4) ||
          (state.fonds === 5 && securityInfo.value.user_phone))
      ) {
        ElMessage.success(t("newCoin.bindSuccess"));
        $store.dispatch("user/logout").then(() => {
          $router.push("/login");
        });
      } else {
        if (state.googleFonds === 3) {
          ElMessage.success(t("newCoin.cancelTip"));
        } else {
          ElMessage.success(t("newCoin.bindTip"));
        }
        getSecurity();
      }
    };
    // 身份验证
    const goAuth = () => {
      if (securityInfo.value.user_auth_level != 2) {
        $router.push("Authentication");
      }
    };
    // 高级认证
    const goAdvanced = () => {
      if (securityInfo.value.user_safety_certificate_type != 2) {
        $router.push("Advanced");
      }
    };
    // 身份认证状态
    const authStatus = (i) => {
      let status = t("user.noveri");
      switch (i) {
        case 1:
          status = t("formTip.underReview");
          break;
        case 2:
          status = t("user.verified");
          break;
        case 3:
          status = t("formTip.auditFailure");
          break;
      }
      return status;
    };
    // 关闭谷歌使用说明
    const closeInfo = () => {
      state.dialogInfo = false;
    };
    const onCancel = () => {
      state.merchantSetVisibility = false;
      state.editPasswordVisibility = false;
      state.type = 0;
      state.safety_verification_key = "";
    };
    const setAssetsPassword = (obj) => {
      obj.to=securityInfo.value.email?securityInfo.value.email:securityInfo.value.mobile
        obj.password=obj.user_fund_password;
        obj.secondary_pawword=obj.user_confirm_fund_password;
        console.log(obj,'更新支付密码----')
      updateUserFundPassword(obj).then((res) => {
        if (res.code==1) {
          state.merchantSetVisibility = false;
          ElMessage.success(res.msg);
          getSecurity();
        } else {
          ElMessage.error(res.msg);
          // state.merchantSetVisibility = true;
        }
      });
    };
    const editAssetsPassword = (obj) => {
      if (state.type === 1) {
        let params = {
          // safety_verification_key: state.safety_verification_key,
          // user_confirm_fund_password: obj.user_confirm_fund_password,
          // user_fund_password: obj.user_fund_password,
          password: obj.user_fund_password,
          secondary_pawword: obj.user_confirm_fund_password,
        };
        resetFundPassword(params).then((res) => {
          state.isCapitalPwd = false;
          if (res.data.value) {
            state.editPasswordVisibility = false;
          } else {
            state.editPasswordVisibility = true;
          }
        });
      } else {
 
        updateUserFundPassword(obj).then((res) => {
          state.isCapitalPwd = false;
          if (res.data.value) {
            state.editPasswordVisibility = false;
          } else {
            state.editPasswordVisibility = true;
          }
        });
      }
    };
    //忘记密码之后选择安全验证，安全验证
    const chooseFounds = () => {
      onCancel();
      state.dialogFonds = true;
      state.fondsTitle = t("fiat.securityVerify");
    };
    return {
      state,
      closeInfo,
      goAuth,
      choiceFonds,
      securityInfo,
      authStatus,
      safSuccess,
      bindSuccess,
      bind,
      googleSaf,
      getSecurity,
      goAdvanced,
      isUIDShow,
      getUserScore,
      user_fund_password_status,
      onCancel,
      setAssetsPassword,
      editAssetsPassword,
      chooseFounds,
      handlePassword,
      fiat_currency_transaction_status,
      virtual_wallet,
      credit_score_status
    };
  },
};
</script>

<style scoped lang="less">
.set {
  width: 100%;
}
.title {
  width: 100%;
  height: 65px;
  // line-height: 65px;
  padding: 20px 30px;
  font-family: PingFang SC;
  font-weight: bold;
  margin-bottom: 1px;
}
.header-info {
  width: 100%;
  height: 224px;
  padding: 30px;
  box-sizing: border-box;
  background-image: url("../../../assets/theme1/accoutbg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.is-rtl {
  .header {
    border-right: none;
    border-left: 1px solid #eaecef;
  }
}
.header {
  width: 100%;
  height: 100%;
  // border-right: 1px solid #eaecef;
  img {
    border-radius: 50%;
    width: 60px;
    margin-inline-end: 20px;
    height: 60px;
  }
  .userinfo {
    height: 60px;
  }
}
.info {
  width: 50%;
  height: 100%;
  padding-inline-start: 39px;
  box-sizing: border-box;
}
.change {
  border: 1px solid @link;
  color: @link;
}
.ml-4 {
  margin-inline-start: 4px;
}
.ml-14 {
  margin-inline-start: 14px;
}
.ml-12 {
  margin-inline-start: 12px;
}
.ml-30 {
  margin-inline-start: 30px;
}
.ml-12 {
  margin-inline-start: 12px;
}
.ml-30 {
  margin-inline-start: 30px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-12 {
  margin-bottom: 12px;
}
.mb-1 {
  margin-bottom: 1px;
}
.mb-2 {
  margin-bottom: 2px;
}
.mb-18 {
  margin-bottom: 18px;
}
.mb-6 {
  margin-bottom: 6px;
}
.mt-16 {
  margin-top: 16px;
}
.p-30 {
  padding: 20px 20px 20px 30px;
  box-sizing: border-box;
}
.plr-10 {
  padding: 0 10px;
  box-sizing: border-box;
}
.safety {
  min-height: 500px;
}
.success {
  color: #60ad76;
}
.veri {
  height: 84px;
  width: 100%;
}
.veri-left {
  width: 250px;
}
.veri-center {
  width: 252px;
}
.w-128 {
  width: 128px;
}
.assets-btn {
  margin-inline-start: 20px;
  padding: 2px 4px;
  height: 22px;
  line-height: 22px;
  padding: 0 10px;
  box-sizing: border-box;
  cursor: pointer;
}
.primary {
  background: @link;
}
.error {
  color: #cf2f43;
}
.errorbg {
  background-color: #cf2f43;
}
.wenhao {
  width: 17px;
  height: 17px;
  border: #c1c1c1 solid 1px;
  border-radius: 50%;
  margin-inline-start: 5px;
}
.use {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.test-box /deep/ .el-dialog__header {
  padding: 20px 45px 10px;
}
</style>
